<template>
    <div style="padding: 10px;">
        <a-form-model :model="config" layout="vertical" class="x-ant-form-model">
            <a-form-model-item :label="$comi18('rxDialog.name', '标题')" >
                <a-input v-model="config.name"></a-input>
            </a-form-model-item>
            <a-form-model-item :label="$ti18('rxForm.rxAlias', '别名')" >
                <a-input v-model="config.alias"></a-input>
            </a-form-model-item>
            <a-form-model-item :label="i18n('centerIndex','中心点坐标')" >
                <a-input v-model="config.center"></a-input>
            </a-form-model-item>
            <a-form-model-item :label="i18n('viewLevel','视图层级')" >
                <a-input-number :min="1" v-model="config.level"></a-input-number>
            </a-form-model-item>
            <a-form-model-item :label="i18n('projectionType','投影类型')" >
                <a-input v-model="config.projectionType"></a-input>
            </a-form-model-item>
            <a-form-model-item :label="i18n('vecUrl','矢量图层Url')" >
                <a-textarea
                    v-model="config.tileLayer.vecUrl"
                    :auto-size="{ minRows: 6}"
                />
            </a-form-model-item>
            <a-form-model-item :label="i18n('cvaUrl','矢量注记Url')">
                <a-textarea
                    v-model="config.tileLayer.cvaUrl"
                    :auto-size="{ minRows: 6}"
                />
            </a-form-model-item>
            <a-form-model-item :label="$comi18('listDef.receiveData','接收数据配置')">
                <a-select
                    style="width: 60%"
                    v-model="config.receive.publishComponent"
                    :options="publishComponent"
                    allowClear
                    @change="changeComponent"
                    :getPopupContainer="(p) => p.parentNode"
                >
                </a-select>
                <a-button v-if="config.receive.publishComponent"
                          style="margin-left: 10px;"
                          @click="openFuncScriptDialog('receive')">{{i18n('scriptConfig','脚本配置')}}</a-button>
            </a-form-model-item>
            <a-form-model-item :label="$comi18('listDef.publishData', '发布数据配置')">
                <a-button @click="openFuncScriptDialog('publish')">{{i18n('scriptConfig','脚本配置')}}</a-button>
            </a-form-model-item>
            <a-form-model-item :label="i18n('mapInitConfig','地图初始化配置')">
                <a-button  @click="openFuncScriptDialog('before')">{{i18n('createBefore','初始化前')}}</a-button>
                <a-button style="margin-left: 10px" @click="openFuncScriptDialog('after')">{{i18n('createAfter','初始化后')}}</a-button>
            </a-form-model-item>
        </a-form-model>
    </div>
</template>

<script>
import ComponentDef from "@/views/modules/form/core/formComponent/ComponentDef";
import { Util, GridMixin} from "@lowcode/jpaas-common-lib";
import GisFuncScriptDialog from "@/views/modules/form/core/formComponent/GisFuncScriptDialog.vue";

export default {
    name: "GisMapDef",
    mixins: [ComponentDef, GridMixin],
    data() {
        return {
            labelCol: {span: 4},
            wrapperCol: {span: 20},
            config: {
                alias: "gis_"+Util.randomId(),
                name: "GIS地图",
                center:"23.1291,113.2644",
                level:11,
                tileLayer:{
                    vecUrl:"",
                    cvaUrl:"",
                },
                projectionType:"w",
                receive:{
                    publishComponent: '',
                    mapping: [],
                    funcScript: "",
                },
                publish:{
                    funcScript: "",
                },
                //初始化前
                before:{
                    funcScript: "",
                },
                //初始化后
                after:{
                    funcScript: "",
                }
            },
            //发布组件
            publishComponent: [],
            //发布组件参数
            componentParamsDef: [],
        }
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "gisMapDef", key);
        },
        init() {
            if (this.conf) {
                Object.assign(this.config, this.conf);
                this.changeComponent(this.config.receive.publishComponent)
            }
            this.publishComponent = this.getPublishOptions();
        },
        changeComponent(val) {
            if (!val) {
                return;
            }
            if (this.config.alias == val) {
                this.config.receive.publishComponent = ''
                this.$notification.warning({message: this.$ti18('rxMsa.tipsInfo','提示信息'), description:  this.$comi18('formDef.cannotSelectEvent', '发布事件组件不能选择自己!')})
                return
            }
            this.componentParamsDef = this.getPubParams(val)
        },
        openFuncScriptDialog(type){
            let self=this;
            if(!this.config[type]){
                this.config[type]={funcScript:""}
            }
            let funcScript = this.config[type].funcScript;
            let conf = {
                component: GisFuncScriptDialog,
                data: {
                    funcScript: funcScript,
                    type : type
                },
                curVm: this,
                zIndex:10000,
                max:true,
                title: this.i18n("event","事件触发脚本")
            }
            Util.open(conf, function (action, data) {
                if (action != 'ok') return;
                self.config[type].funcScript = data;
            });
        }
    },
    watch: {
        config: {
            handler: function (val, oldVal) {
                var self=this;
                setTimeout(()=>{  //设置延迟执行
                    self.$emit('dragclick',val, "", self.type);
                },1000);
            },
            deep: true
        }
    }
}
</script>

<style scoped>
</style>